<template>
  <transition name="translate">
    <div class="wrapper"
         @click.stop="handleHide">
      <common-back :content="title"></common-back>
      <div class="icon-more-wrap"
           @click.stop="handleShow">
        <i class="iconfont">&#xe608;</i>
      </div>
      <ul class="nav"
          v-if="isShow">
        <li class="nav-item"
            v-for="item of page"
            :key="item.content"
            @click="handleNav(item.url)">{{item.content}}</li>
      </ul>
      <div class="loose-change">
        <div class="top">
          <div class="loose-change-wrap">
            <i class="iconfont">&#xe644;</i>
          </div>
          <div class="desc">
            <div class="title">我的零钱</div>
            <div class="desc-num">￥{{money}}.00</div>
          </div>
        </div>
        <div class="bottom"
             border-top-bottom-1px>
          <ul class="bottom-nav">
            <li class="bottom-nav-item"
                border-right-1px>
              <div class="money">今日收入</div>
              <div class="bottom-desc">{{today}}</div>
            </li>
            <li class="bottom-nav-item"
                border-right-1px>
              <div class="money">本周收入</div>
              <div class="bottom-desc">{{week}}</div>
            </li>
            <li class="bottom-nav-item"
                border-right-1px>
              <div class="money">本月收入</div>
              <div class="bottom-desc">{{month}}.00</div>
            </li>
          </ul>
        </div>
      </div>
      <common-button :content="content" @submit="handleSubmit"></common-button>
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
export default {
  name: '',
  components: {
    CommonBack,
    CommonButton
  },
  created () {
    this.getWallet()
  },
  data () {
    return {
      title: '我的钱包',
      content: '提现',
      isShow: false,
      money: 0,
      today: 0,
      week: 0,
      month: 0,
      page: [
        {
          content: '绑定卡号',
          url: '/me/wallet/card'
        },
        {
          content: '资金明细',
          url: '/me/wallet/particulars'
        }
      ]
    }
  },
  methods: {
    handleShow () {
      this.isShow = !this.isShow
    },
    handleHide () {
      this.isShow = false
    },
    handleSubmit () {
      this.$router.push({
        path: '/me/wallet/withdraw'
      })
    },
    handleNav (url) {
      this.$router.push({
        path: url
      })
    },
    getWallet () {
      this.$api.me.wallet()
        .then(this.getWalletSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getWalletSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.money = data.pocket.wallet
        this.today = data.pocket.today
        this.week = data.pocket.weeks
        this.month = data.pocket.months
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  background-color $common_bgc
  z-index 10

  .icon-more-wrap
    position absolute
    top 0
    right 0
    width 70px
    height 88px
    display flex
    justify-content center
    align-items center

    i
      font-size $me
      color $footer_bgc

.nav
  width 221px
  position absolute
  top 100px
  right 0
  background-color $common_bgc
  box-shadow 0px 6px 14px 0px rgba(5, 5, 5, 0.14)

  .nav-item
    width 100%
    height 86px
    line-height 86px
    text-indent 32px
    font-size $shop_name
    font-weight 400
    color $common_fz_color

    &:active
      background-color $space

.top
  display flex
  justify-content center
  flex-direction column
  align-items center
  padding-top 90px
  padding-bottom 46px
  box-sizing border-box

  .loose-change-wrap
    width 162px
    height 162px
    text-align center
    line-height 162px
    margin-bottom 24px

    i
      font-size 162px
      color #F9CA01

  .desc
    display flex
    justify-content center
    flex-direction column
    align-items center

    .title
      font-size $me
      line-height 72px
      font-weight 500
      color $footer_bgc

    .desc-num
      font-size 82px
      font-weight bold
      color $footer_bgc
      line-height 115px

.bottom
  width 100%

  ul
    width 100%
    display flex

    li
      flex 1
      padding-top 33px
      padding-bottom 33px
      padding-left 33px
      padding-right 33px
      box-sizing border-box
      display flex
      justify-content center
      align-items center
      flex-direction column

      &:nth-last-of-type(1)
        border none

      .money
        font-size $shop_name
        line-height $shop_name
        font-weight 500
        color $common_fz_color
        margin-bottom 20px

      .bottom-desc
        font-size $address
        line-height $address
        font-weight 400
        color $common_fz_color

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
